<template>
<view v-if="loadingDiaryList"  style="margin-top: 24px;" >
  <nut-skeleton width="250px" height="15px" title animated avatar avatarSize="60px" row="24" > </nut-skeleton>
</view>

<view class="diary-list" v-else >
  <view class="diary-item" v-for="item in diaryList" :key="item.id" >
    <diaryCardCom :diary="item" pure />
  </view>
</view>
</template>
<script lang='ts'  setup >
  import { ref, onMounted } from 'vue';
  import { DiaryController } from '@/controller'
  import { onLoad } from '@dcloudio/uni-app'
  import diaryCardCom from '@/components/diary-card-com/diary-card-com.vue'

  const loadingDiaryList  = ref(false)

  const diaryList = ref<API.DIARY[]>([])

  const queryParams = ref({
    day: '',
    page: 1,
    hourGan: '',
    total: 0
  })

  const final = ref(false)

  const getDiaryPage = async () => {
    if (queryParams.value.page == 1 )  loadingDiaryList.value = true

    const data = await DiaryController.getDiaryByHourGanWithDay(queryParams.value)
    loadingDiaryList.value = false
    queryParams.value.total = data.total
    if (diaryList.value.length < queryParams.value.total) {
      diaryList.value.push(...data.records)
    }
    if (diaryList.value.length === queryParams.value.total) {
      final.value = true
    }
  }

  onLoad((option: any) => {
    queryParams.value.hourGan = option.hourGan
    queryParams.value.day = option.day
    console.log(option);
    
  })

  onMounted(() => {
    getDiaryPage()
  })

</script>
<style lang='scss' scoped >
 @import '@/styles/index.scss';

</style>